<template>
	<view class="index-section">
		<tit tit="游林芝" url="/pages/home/swimIndex" v-if="home" />
		<view class="clickableInfo" v-if="home">
			<clickBtn :tabList="tabList" @cur="cur" ref="clickBtn"/>
		</view>
		<view class="main">
			<view class="item" v-for="(item,index) in list" :key="index" @tap.stop="handleDetail(item.id)">
				<view class="left">
					<image :src="$imageOss(item.image)" mode="aspectFill" style="" class="image"></image>
				</view>
				<view class="right">
					<view class="top">
						{{item.title}}
					</view>
					<view class="bot">
						<text class="title">{{item.from}}</text>
						<text class="time">{{item.createtime}}</text>
					</view>
				</view>
			</view>
			<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 10rpx;">{{isText}}</view>
		</view>
	</view>
</template>

<script>
	import tit from '@/pages/index/cpns/title.vue';
	import clickBtn from '@/pages/index/cpns/clickBtn.vue';
	import {
		visitCategory,
		visitList
	} from "@/request/homeApi.js"
	export default {
		components: {
			tit,
			clickBtn,
		},
		props: {
			home: {
				type: Boolean,
				default: true
			},
			// 'list': {
			// 	default: [],
			// 	type: Array
			// },
			url: {
				default: '',
				type: String
			}
		},
		data() {
			return {
				tabList: [],
				list: [],
				visit_category_id: '',
				isText: ''
			};
		},
		mounted() {
			this.getCategory()

		},
		methods: {
			cur(e) {
				this.visit_category_id = e
				this.getList()
			},
			getCategory() {
				let that = this
				visitCategory().then(res => {
					if (res.code == 200) {
						that.tabList = res.data
						that.visit_category_id = res.data? res.data[0].id : ''
						this.$refs.clickBtn.changeIndex()
						this.getList()
					}

				})
			},
			getList() {
				let that = this
				
				visitList({
					visit_category_id: that.visit_category_id,
					page: 1,
					limit: 2,
					title: '',
					type: '',
					recommend: 2
				}).then(res => {
					that.list = res.data.list
					res.data.count == 0 ? that.isText = '暂无' : that.isText = ''
				})
			},
			handleDetail(id) {
				uni.navigateTo({
					url: `/pages/home/festivalDetail?id=${id}&type=8`,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-section {
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;

		.clickableInfo {
			margin: 20rpx 0;
		}

		.main {
			display: flex;
			flex-direction: column;

			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.left {
					width: 160rpx;
					height: 122rpx;
					margin-right: 20rpx;

					.image {
						border-radius: 8rpx;
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 30rpx;

					.top {}

					.bot {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title {
							color: #466EC5;
							font-family: PingFang SC;
							font-size: 24rpx;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
						}

						.time {
							color: #B6B6B6;
							font-family: PingFang SC;
							font-size: 24rpx;
							font-style: normal;
							font-weight: 400;
							margin-right: 24rpx;
							line-height: normal;
						}
					}
				}
			}
		}

	}
</style>